<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工请假审批流程测试</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        .section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
        }
        .section h3 {
            color: #1890ff;
            margin-top: 0;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, select, textarea {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            font-size: 14px;
        }
        button {
            background-color: #1890ff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        button:hover {
            background-color: #40a9ff;
        }
        button:disabled {
            background-color: #d9d9d9;
            cursor: not-allowed;
        }
        .result {
            margin-top: 15px;
            padding: 15px;
            border-radius: 4px;
            font-family: monospace;
            white-space: pre-wrap;
        }
        .success {
            background-color: #f6ffed;
            border: 1px solid #b7eb8f;
            color: #52c41a;
        }
        .error {
            background-color: #fff2f0;
            border: 1px solid #ffccc7;
            color: #ff4d4f;
        }
        .info {
            background-color: #e6f7ff;
            border: 1px solid #91d5ff;
            color: #1890ff;
        }
        .task-item {
            background: #fafafa;
            padding: 15px;
            margin: 10px 0;
            border-radius: 4px;
            border-left: 4px solid #1890ff;
        }
        .task-title {
            font-weight: bold;
            color: #333;
        }
        .task-details {
            color: #666;
            font-size: 14px;
            margin-top: 5px;
        }
        .workflow-diagram {
            text-align: center;
            margin: 20px 0;
            padding: 20px;
            background: #fafafa;
            border-radius: 6px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>员工请假审批流程测试</h1>
        
        <!-- 流程图 -->
        <div class="section">
            <h3>流程概览</h3>
            <div class="workflow-diagram">
                <div style="font-size: 16px; color: #666;">
                    <div>员工申请 → 天数判断 → 短期请假(直接审批) / 长期请假(并行审批) → 结果通知 → 审批完成</div>
                    <div style="margin-top: 10px; font-size: 14px;">
                        短期请假(≤3天): 员工申请 → 直属领导审批 → 结果通知 → 完成<br>
                        长期请假(>3天): 员工申请 → HR审批 + 经理审批(并行) → 结果通知 → 完成
                    </div>
                </div>
            </div>
        </div>

        <!-- 启动流程 -->
        <div class="section">
            <h3>启动请假审批流程</h3>
            <form id="leaveForm">
                <div class="form-group">
                    <label for="applicant">申请人:</label>
                    <input type="text" id="applicant" name="applicant" value="张三" required>
                </div>
                <div class="form-group">
                    <label for="leaveType">请假类型:</label>
                    <select id="leaveType" name="leaveType" required>
                        <option value="personal">事假</option>
                        <option value="sick">病假</option>
                        <option value="annual">年假</option>
                        <option value="maternity">产假</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="leaveDays">请假天数:</label>
                    <input type="number" id="leaveDays" name="leaveDays" value="2" min="1" max="30" required>
                </div>
                <div class="form-group">
                    <label for="reason">请假原因:</label>
                    <textarea id="reason" name="reason" rows="3" placeholder="请详细说明请假原因">个人事务处理</textarea>
                </div>
                <button type="submit">启动流程</button>
                <button type="button" onclick="startTestProcesses()">启动测试流程</button>
            </form>
            <div id="startResult" class="result" style="display: none;"></div>
        </div>

        <!-- 查看任务 -->
        <div class="section">
            <h3>待办任务</h3>
            <button onclick="loadTasks()">刷新任务列表</button>
            <button onclick="loadTasks('manager001')">查看直属领导任务</button>
            <button onclick="loadTasks('hr001')">查看HR任务</button>
            <button onclick="loadTasks('dept001')">查看经理任务</button>
            <div id="tasksResult" class="result" style="display: none;"></div>
        </div>

        <!-- 完成任务 -->
        <div class="section">
            <h3>完成任务</h3>
            <div class="form-group">
                <label for="taskId">任务ID:</label>
                <input type="text" id="taskId" name="taskId" placeholder="输入任务ID">
            </div>
            <div class="form-group">
                <label for="approved">审批结果:</label>
                <select id="approved" name="approved">
                    <option value="true">通过</option>
                    <option value="false">拒绝</option>
                </select>
            </div>
            <div class="form-group">
                <label for="comment">审批意见:</label>
                <textarea id="comment" name="comment" rows="2" placeholder="请输入审批意见">同意申请</textarea>
            </div>
            <button onclick="completeTask()">完成任务</button>
            <div id="completeResult" class="result" style="display: none;"></div>
        </div>

        <!-- 查看流程实例 -->
        <div class="section">
            <h3>流程实例详情</h3>
            <div class="form-group">
                <label for="processInstanceId">流程实例ID:</label>
                <input type="text" id="processInstanceId" name="processInstanceId" placeholder="输入流程实例ID">
            </div>
            <button onclick="getProcessInstance()">查看详情</button>
            <div id="processResult" class="result" style="display: none;"></div>
        </div>
    </div>

    <script>
        const API_BASE = '/api/leave-approval';

        // 启动请假流程
        document.getElementById('leaveForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const formData = new FormData(e.target);
            const data = Object.fromEntries(formData.entries());
            data.leaveDays = parseInt(data.leaveDays);
            data.applyTime = new Date().toISOString();

            try {
                const response = await fetch(`${API_BASE}/start`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(data)
                });

                const result = await response.json();
                showResult('startResult', result, result.success);
            } catch (error) {
                showResult('startResult', { error: error.message }, false);
            }
        });

        // 启动测试流程
        async function startTestProcesses() {
            try {
                const response = await fetch(`${API_BASE}/test`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    }
                });

                const result = await response.json();
                showResult('startResult', result, result.success);
            } catch (error) {
                showResult('startResult', { error: error.message }, false);
            }
        }

        // 加载任务列表
        async function loadTasks(assignee = null) {
            try {
                const url = assignee ? `${API_BASE}/tasks?assignee=${assignee}` : `${API_BASE}/tasks`;
                const response = await fetch(url);
                const result = await response.json();
                showResult('tasksResult', result, result.success);
            } catch (error) {
                showResult('tasksResult', { error: error.message }, false);
            }
        }

        // 完成任务
        async function completeTask() {
            const taskId = document.getElementById('taskId').value;
            const approved = document.getElementById('approved').value === 'true';
            const comment = document.getElementById('comment').value;

            if (!taskId) {
                showResult('completeResult', { error: '请输入任务ID' }, false);
                return;
            }

            try {
                const response = await fetch(`${API_BASE}/complete/${taskId}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ approved, comment })
                });

                const result = await response.json();
                showResult('completeResult', result, result.success);
            } catch (error) {
                showResult('completeResult', { error: error.message }, false);
            }
        }

        // 获取流程实例详情
        async function getProcessInstance() {
            const processInstanceId = document.getElementById('processInstanceId').value;
            
            if (!processInstanceId) {
                showResult('processResult', { error: '请输入流程实例ID' }, false);
                return;
            }

            try {
                const response = await fetch(`${API_BASE}/process/${processInstanceId}`);
                const result = await response.json();
                showResult('processResult', result, result.success);
            } catch (error) {
                showResult('processResult', { error: error.message }, false);
            }
        }

        // 显示结果
        function showResult(elementId, data, isSuccess) {
            const element = document.getElementById(elementId);
            element.style.display = 'block';
            element.className = `result ${isSuccess ? 'success' : 'error'}`;
            element.textContent = JSON.stringify(data, null, 2);
        }

        // 页面加载时自动加载任务
        window.onload = function() {
            loadTasks();
        };
    </script>
</body>
</html>

